//轮播图
//找到所有的button
var btns = document.getElementsByTagName("button");
//找到所有的图片
var carousel_img = document.getElementsByClassName("carousel_img")[0];
var imgs = carousel_img.children
// 找到所有的小圆点
var ul = document.getElementsByClassName("ul")[0];
var lis = ul.children;

//当前正在显示的图片下标
var j = 0;
imgs[j].className = "active";


for (i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        if (this.innerText == ">") {
            //隐藏当前图片
            imgs[j].className = "";


            j = j + 1;
            //imgs[j].className = "active";不应该写在这里，因为j = j + 1后可能会存在下标越界，所以要写在控制边界值的操作之后。
            if (j == imgs.length) {
                j = 0;
            }
            //显示下一张图片
            imgs[j].className = "active";


            //当前图片显示的为J 由于小圆点下标与图片下标一致
            //清除之前小圆点的active
            for (var f = 0; f < lis.length; f++) {
                lis[f].className = "";

            }
            //把当前正在显示的图片下标对应的小圆点变成active
            lis[j].className = "active"

        } else {
            //隐藏当前图片
            imgs[j].className = "";

            //显示上一张图片
            j = j - 1;

            //控制边界值
            if (j == -1) {
                j = imgs.length - 1;
            }

            imgs[j].className = "active";

            //清除之前所有的小圆点的active
            for (var f = 0; f < lis.length; f++) {
                lis[f].className = "";
            }
            //把当前显示的图片的对应的小圆点设置active
            lis[j].className = "active"





        }
    }
}
for (i = 0; i < lis.length; i++) {

    lis[i].onclick = function () {
        //遍历所有li清空active
        for (i = 0; i < lis.length; i++) {
            lis[i].className = ""
        }
        //点击过后，li active
        this.className = "active"


        //  1 --0  jjjj--1  3--2  4--3



        //K是小圆点下标，也是对应图片下标
        var k = this.getAttribute("imageV");
        //隐藏当前正在显示的图片
        imgs[j].className = "";

        //把当前图片显示
        // if (k == "1") {
        //     imgs[0].className = "active";
        //     j = 0;
        // } else if (k == "jjjj") {
        //     imgs[1].className = "active";
        //     j = 1;
        // } else if (k == "3") {
        //     imgs[2].className = "active";
        //     j = 2;
        // } else if (k == "4") {
        //     imgs[3].className = "active";
        //     j = 3;
        // }

        //显示点击小圆点时的图片
        imgs[k].className = "active";

        //k是字符串
        //K是小圆点下标，也是对应图片下标,所以要将k赋给j
        j = parseInt(k);

    }

}
// 定时
// timer = setInterval(function () { },)


//其实就相当于每隔1000ms就做一轮右键清空图和显示图片和对应的清除小圆点样式和显示小圆点样式的操作
timer = setInterval(function () {

    imgs[j].className = "";
    j = j + 1;
    if (j == imgs.length) {
        j = 0;
    }
    imgs[j].className = "active";

    for (var f = 0; f < lis.length; f++) {
        lis[f].className = "";
    }
    //把当前显示的图片的对应的小圆点设置active
    lis[j].className = "active"


}, 1500)

//鼠标移入停止定时循环和鼠标移出开启定时循环
var car = document.getElementsByClassName("carousel_img")[0];
car.onmouseover = function () {

    clearInterval(timer);

}

car.onmouseout = function () {
    clearInterval(timer);

    timer = setInterval(function () {

        imgs[j].className = "";
        j = j + 1;
        if (j == imgs.length) {
            j = 0;
        }
        imgs[j].className = "active";

        for (var f = 0; f < lis.length; f++) {
            lis[f].className = "";
        }
        //把当前显示的图片的对应的小圆点设置active
        lis[j].className = "active"


    }, 1500)


}




